<template>
  <div class="home">
    <van-overlay :show="show"
                 :z-index=200>

    </van-overlay>
    <van-loading v-if="show"
                 color="#1989fa"
                 size="50px"/>
    <div class='header'>
      <router-link tag="div"
                   to="/cityDetail">
        <a id='city'
           v-if="cityname">{{cityname}}</a>
        <p class="trangle"></p>
      </router-link>
      <div class='search'>
        <img src="../../../static/index/search.png"
             alt=""
             @click="handleSearch">
        <!--<span>好房源尽在门铺网</span>-->
        <input type="text"
               value=""
               placeholder="好房源尽在门铺网"
               v-model="SerachValue">
      </div>
      <!--<img src="../../../static/index/ioc-21.png" alt="">-->
    </div>
    <div id='myBg'>
      <div id='search'>
        <img src="../../../static/index/ioc-13.png"
             alt=""
             @click="handleSearch">
        <!--<span>好房源尽在门铺网</span>-->
        <input type="text"
               value=""
               placeholder="好房源尽在门铺网"
               v-model="SerachValue">
      </div>
    </div>
    <van-swipe :autoplay="3000"
               indicator-color="white">
      <van-swipe-item v-for="item in SwiperList"
                      :key="item.id">
        <img :src="`${imgUrl}${item.image}`"/></van-swipe-item>
    </van-swipe>
    <!-- 分类 -->
    <ul class='kind bal'>
      <li @click="handleGoLists(item.catid)"
          v-for="item in secMenuNav.slice(0,4)"
          :key="item.catid"
          class='ver'>
        <i></i>
        <p>{{item.name}}</p>
      </li>
    </ul>
    <!-- 求租求购 -->
    <ul class='rent'>
      <router-link tag="li"
                   :to="{path:'TopicList',query:{type:1,title:'低价转让'}}">
        <img src="../../../static/tu-5.jpg"
             alt="">
        <div>
          <!--<p>低价转让>></p>-->
          <!--<p>低价转让,省时、省力、省钱</p>-->
        </div>
      </router-link>
      <router-link tag="li"
                   :to="{path:'TopicList',query:{type:2,title:'低价租售'}}">
        <img src="../../../static/tu-6.jpg"
             alt="">
        <div>
          <!--<p>低价租售>></p>-->
          <!--<p>找门店、找租房、方便快捷</p>-->
        </div>
      </router-link>
      <!-- <router-link tag="li"
                   :to="{path:'TopicList',query:{type:3,title:'求租信息'}}">
        <img src="../../../static/tu-7.jpg"
             alt="">
        <div>
        </div>
      </router-link>
      <router-link tag="li"
                   :to="{path:'caseDetail'}">
        <img src="../../../static/tu-8.jpg"
             alt="">
        <div>
        </div>
      </router-link> -->
    </ul>
    <!-- 精选推荐  -->
    <div class='recom'>
      <div class='title'>
        <span>精选推荐</span>
        <p class='triangle_border_right'></p>
      </div>
      <div class='type'>
        <span :class="CurrentIndex === item.catid ? 'active' : '' "
              @click="handleCurrent(item.catid)"
              v-for="item in secMenuChildList"
              :key="item.catid">{{item.name}}
        </span>
      </div>
    </div>
    <!-- 内容 -->
    <ul class='jx'
        v-if="getList.length > 0">
      <router-link tag="li"
                   :to="'/detail/'+ item.id"
                   v-for="(item,index) in getList"
                   :key="index">
        <div>
          <img :src="`${imgUrl}${item.img_path}`"
               alt="">
          <p>
            {{item.catname}}
            &nbsp;|&nbsp;
            {{item.acreage}}m²
          </p>
        </div>
        <div class='cont'>
          <p>{{item.title}}</p>
          <p>
            <span><img src="../../../static/index/ioc-20.png"
                       alt="">{{item.areaname}}</span>
            <span v-if="item.rent>=1">{{item.rent}}{{item.danwei}}</span>
            <span v-else>面议</span>
          </p>
        </div>
      </router-link>
    </ul>
    <span v-else
          class="noData">暂无数据</span>
    <!-- 为您推荐  -->
    <div class='forYou'>
      <div class='title'>
        <span>为您推荐</span>
        <p class='triangle_border_right'></p>
      </div>
      <div class='forType'>
        <span :class="CurrentIndexY === item.catid ? 'active' : '' "
              @click="handleCurrentY(item.catid)"
              v-for="(item,index) in secMenuChildList2"
              :key="index">{{item.name}}
        </span>
      </div>
    </div>
    <!-- 内容 -->
    <ul class='recom-content'
        v-if="forYou.length > 0">
      <router-link tag="li"
                   :to="'/detail/'+ item.id"
                   v-for="(item,index) in forYou"
                   :key="index">
        <p><img :src="`${imgUrl}${item.img_path}`"
                alt=""></p>
        <div>
          <p>{{item.title}}</p>
          <p>区域:{{item.areaname}}{{item.catname}}</p>
          <div class="additionParams">
            <span v-if="item.info_level === 2"
                  class="info_level">推荐</span>
            <span v-if="item.certify === 1"
                  class="certify">认证</span>
            <span v-if="item.iftop === 2"
                  class="iftop">置顶</span>
            <span v-if="item.ifindextop === 1"
                  class="ifindextop">精顶</span>
          </div>
          <!--<p>房源编号7074 信息已认证为真实房源</p>-->
          <p>价格:
            <span v-if="item.rent>=1">{{item.rent}}&nbsp;|&nbsp;{{item.acreage}}m²</span>
            <span v-else>面议&nbsp;|&nbsp;{{item.acreage}}m²</span>
          </p>
        </div>
        <p>
          <!--<button>认证</button>-->
          <!--<button>置顶</button>-->
        </p>
      </router-link>
    </ul>
    <span v-else
          class="noData">暂无数据</span>
  </div>
</template>

<script>
  import {setStore, getStore} from '../../config/mUtils'
  import {checkPermision} from "../../assets/js/checkPermision"

  export default {
    name: 'home',
    data() {
      return {
        UserInfoPage: {}, //默认信息对象
        tokens: getStore('token'),
        cityid: "",
        homelist: [],
        lng: '',
        lat: '',
        cityname: '',
        SerachValue: '',
        SwiperList: [],
        secMenuNav: [],
        secMenuChildList: [], //精选推荐
        imgUrl: 'http://menpuwang.com/',
        CurrentIndex: 0,
        getList: [], //精选推荐
        forYou: [],
        CurrentIndexY: 0,
        show: true,
        secMenuChildList2: [], //为你推荐
        hasPermissionflag: false
      }
    },
    mounted() {
      window.addEventListener("scroll", this.handleScroll)
    },
    created() {
      if (!getStore('cityid')) {
        this.set()
      } else {
        this.initDate()
      }
      this.setStore()
    },
    methods: {
      setStore() {
        setStore("credit_fee", '')
        setStore("email", '')
        setStore("phone", '')
        setStore("score_fee", '')
        setStore("sign_score", '')
      },
      //获取经纬度
      set() {
        //调取默认配置信息  转换的比例
        this.$axios.get('mpconfig/getConfig').then((res) => {
          setStore("credit_fee", res.data.data.credit_fee)
          setStore("email", res.data.data.email)
          setStore("phone", res.data.data.phone)
          setStore("score_fee", res.data.data.score_fee)
          setStore("sign_score", res.data.data.sign_score)
          this.lng = res.data.data.lng
          this.lat = res.data.data.lat
          this.getCityid()
        });
      },
      initDate() {
        //轮播数据
        this.$axios.post('menu/myFocus', this.qs.stringify({
          "cityid": getStore('cityid')
        })).then((res) => {
          this.SwiperList = res.data.data
        });
        //二级大类
        this.$axios.post('menu/appmenu', this.qs.stringify({
          "cityid": getStore('cityid'),
          "token": getStore("token")
        })).then((res) => {
          this.secMenuNav = res.data.data
          this.secMenuChildList = res.data.data[0].child
          this.secMenuChildList2 = res.data.data[1].child

          this.CurrentIndex = res.data.data[0].child[0].catid
          this.CurrentIndexY = res.data.data[1].child[0].catid
          this.handleCurrent(this.CurrentIndex)
          this.handleCurrentY(this.CurrentIndexY)
          this.show = false
        });
        this.cityid = getStore('cityid')
        this.cityname = getStore("cityname")
      },
      //大类跳转Lists
      handleGoLists(id) {
        this.$router.push({
          path: '/lists',
          query: {
            catid: id,
            cityid: getStore('cityid')
          }
        })
      },
      //精选推荐
      handleCurrent(id) {
        this.getList = []
        this.CurrentIndex = id
        this.$axios.post('category/getList', this.qs.stringify({
          "cityid": getStore('cityid'),
          "catid": id,
          "token": getStore("token"),
          "listRow": 30
        })).then((res) => {
          this.getList = res.data.data.info
        });
      },
      //为你推荐
      handleCurrentY(id) {
        this.forYou = []
        this.CurrentIndexY = id
        this.$axios.post('category/getList', this.qs.stringify({
          "cityid": getStore('cityid'),
          "catid": id,
          "token": getStore("token"),
          "listRow": 30
        })).then((res) => {
          this.forYou = res.data.data.info
        });
      },
      //搜索框
      handleSearch() {
        if (!this.SerachValue) {
          this.$toast.fail('请输入内容')
        } else {
          this.$router.push({
            path: '/searchDetail',
            query: {
              keyVal: this.SerachValue
            }
          })
        }
      },
      // 监听滚动轴
      handleScroll() {
        var t = document.documentElement.scrollTop || document.body.scrollTop; //变量t就是滚动条滚动时，到顶部的距离
        var left = document.getElementById("search");
        var sea = document.querySelector(".search");
        if (t >= 17) {
          //当拖动到距离顶部100px处时，左边导航固定，不随滚动条滚动
          left.style.display = "none";
          sea.style.display = "block";
        } else {
          left.style.display = "block";
          sea.style.display = "none";
        }
      },
      getCityid() {
        //根据经纬度 获取城市id
        this.$axios.post('/category/getCity', this.qs.stringify({
          lng: this.lng,
          lat: this.lat
        })).then((res) => {
          setStore('cityname', res.data.data.cityname)
          setStore('cityid', res.data.data.cityid)

          this.cityid = res.data.data.cityid
          this.cityname = getStore("cityname")
          this.initDate()
        })
      }
    },
    destroyed() {
      window.removeEventListener("scroll", this.handleScroll);
    }
  }
</script>

<style scoped>
  @import "../../assets/css/index.css";

  .noData {
    text-align: center;
    display: block;
    margin: 30px;
  }

  .van-loading,
  .van-loading__spinner {
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 201;
    width: 120px;
    height: 120px;
    margin-left: -50px;
    margin-top: -50px;
  }

  .header a {
    color: #fff;
  }

  .search {
    overflow: hidden;
  }
</style>
